var video = $("video").get(0); //获取视频对象 把Jquery对象转化为 dom对象


function formatTime(time) {

    var h = Math.floor(time / 3600); //小时  
    var m = Math.floor(time % 3600 / 60); //分钟   3700%3600=100s 100s/60s=1.xx
    var s = Math.floor(time % 60); // 秒  除以60的余数  70s/60s=1...10s
    // 00:00:00
    return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (s < 10 ? "0" + s : s);
}


// 1.显示时间: 当浏览器可以播放视频时候，让时间显示出来
video.oncanplay = function() {
    $("video").show();
    console.log(video.duration); //打印出视频总时长 52.208333s 
    var totalTime = formatTime(video.duration); //52.208333s 
    console.log(totalTime);
    $(".total").html(totalTime);
}

//2. 实现视频播放与暂停效果
$(".switch").on("click", function() {

    if ($(this).hasClass("fa-play")) { //播放视频
        video.play(); //对象 方法-函数
        $(this).addClass("fa-pause").removeClass("fa-play");

    } else { //暂停播放
        video.pause(); //对象 方法-函数
        $(this).addClass("fa-play").removeClass("fa-pause");
    }
})

//3. 实现进度条显示
video.ontimeupdate = function() {
    console.log(video.currentTime);
    var w = video.currentTime / video.duration * 100 + "%";
    console.log(w);
    $(".line").css("width", w);
    $(".current").html(formatTime(video.currentTime));

}